<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">微信登录</view>
			</block>
		</cu-custom>
		<view class="padding-top-48 padding-left-32 padding-right-32">
			<view class="flex align-center justify-between">
				<view>
					<view class="selLogin-top-text">GREEN</view>
					<view class="selLogin-top-text">PASSPORT</view>
				</view>
				<view>
					<image src="https://txr001.zthj.net/static/img/login.png" class="login-logo"></image>
				</view>
			</view>
			<view class="padding-top-16 ">
				<text class="text-0101 text-bold-600 text-64">青牒碳账户</text>
				<text class="padding-left-16 padding-right-24 text-64"> | </text>
				<text class="text-0101 text-bold-600 text-64">登录</text>
			</view>
		</view>
		<view class="footer">
			<view class="buz">
				<view class="bubg"><image src="https://txr001.zthj.net/voucher_img/buz1.png"></image> <text>步骤</text></view>
				<view class="auimg">
					<button class="avatar-wrapper" style="borderColor:#fff"  open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					  <image class="avatar" :src="avatarUrl" v-if="avatarUrl"></image>
					  <view class="noimgs" v-else>
					  	<image src="https://txr001.zthj.net/voucher_img/auimg.png"></image>
					  	<view>请选择头像</view>
					  </view>
					</button> 
				</view>
			</view>
			<view class="buz">
				<view class="bubg"><image src="https://txr001.zthj.net/voucher_img/buz2.png"></image> <text>步骤</text></view>
				<view class="buzinput">
					<image src="https://txr001.zthj.net/voucher_img/usname.png"></image>
					<input  placeholder="请选择用户名" id="nickname-input" type="nickname" v-model="nickName" @input="onInput"/>
				</view>
			</view>
			<button class="cu-btn wx-btn" @click="login">登录</button>
		</view>
	</view>
</template>

<script>
import { loginfunc } from '@/common/fa.mixin.js';
	export default {
        mixins: [loginfunc],
		data() {
			return {
				// isAgree: false,
				check:false,
                avatarUrl:"",
				nickName:""
			}
		},
		methods: {
			
			onChooseAvatar(e){
				let that = this;
                //上传
                uni.uploadFile({
                    url: 'https://qd.zthj.net/api/Common/upload',
                    filePath: e.detail.avatarUrl,
                    name: 'file',
                    success: (ret) => {
                        let info = JSON.parse(ret.data);
                        that.avatarUrl = info.data.fullurl;
                    }
                });
			},
			onInput(e){
				this.nickName=e.detail.value;
			},
            login(){
                let that = this;
				// 当你点了自己的昵称以后，发现此时页面上双向绑定的nickname你会发现无法拿到值
				// 通过节点获取节点内容
				uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)
					.select("#nickname-input")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						if(res.length>0){
							that.nickName=res[0].value
						}
					})
                uni.login({
                    success: async function(ret) {
                        let data = {
                            code: ret.code,
                            rawData: {
                                nickName: that.nickName,
                                avatarUrl: that.avatarUrl
                            },
                            __token__: that.vuex__token__
                        };
                        //有推荐码的话，带上
                        if (that.vuex_invitecode) {
                            data.invitecode = that.vuex_invitecode;
                        }

                        let res = await that.$api.gowxLogin(data);
                        if (!res.code) {
                            that.$u.toast(res.msg);
                            return;
                        }
                        if (res.data.user) {
                            that.$u.vuex('vuex_token', res.data.user.token);
                            uni.setStorageSync('jwt_token',res.data.token);
                            that.success(2);
                            return;
                        }
                        that.$u.vuex('vuex_third', res.data.third);
                        //授权成功到登录或绑定页面
                        that.$u.route('/pages/login/register', { bind: 'bind' } );

                    }
                });
            }
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="less">
	.selLogin-top-text {
		font-size: 40rpx;
		font-weight: 400;
		color: #010101;
	}

	.login-logo {
		width: 48rpx;
		height: 68rpx;
	}

	.uncheck-img-class {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	.wx-btn {
		height: 88rpx;
		line-height: 88rpx;
		background: #24458E;
		border-radius: 32rpx;
		width: 100%;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 96rpx;
	}

	.phone-btn {
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 32rpx;
		border: 2rpx solid #010101;
		background-color: #fff;
		width: 100%;
		font-size: 32rpx;
		font-weight: 400;
		color: #010101;
		margin-top: 48rpx;
	}

	.footer {
		padding: 0 32rpx;
		margin-top: 98rpx;
		.buz{
			.bubg{
				width: 110rpx;
				height: 38rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}
				
				text{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					position: absolute;
					right: 16rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.auimg{
				width: 210rpx;
				margin: 0 auto;
				margin-top: 12rpx;
				overflow: hidden;
				text-align: center;
				.avatar-wrapper{
					background-color: transparent;
					padding: 0;
					border: 0;
					outline: none;
					box-shadow: unset;
					border: none;
					&::after{
						display: none;
					}
				}
				image{
					width: 210rpx;
					height: 210rpx;
					display: block;
					border-radius: 100%;
				}
				view{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #767879;
				}
			}
			.buzinput{
				margin-top: 48rpx;
				display: flex;
				padding: 24rpx 32rpx;
				height: 88rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #D5D8D9;
				image{
					width: 40rpx;
					height: 40rpx;
					display: block;
					margin-right: 24rpx;
				}
				input{
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #767879;
				}
			}
		}
	}
</style>